<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width:400px;
        height:200px;
        margin:100px auto;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .hour{
        width:100px;
        height:100px;
        background-color:#000000;
        color:#ffffff;
        text-align:center;
    }
    .minute{
        width:100px;
        height:100px;
        background-color:#000000;
        color:#ffffff;
        text-align:center;
    }
    .second{
        width:100px;
        height:100px;
        background-color:#000000;
        color:#ffffff;
        text-align:center;
    }
</style>
<body>
    <div>
        <div class='hour'>1</div>
        <div class='minute'>2</div>
        <div class='second'>3</div>
    </div>

    <script>
        //1、获取元素
        var hour = document.querySelector('.hour');
        var min = document.querySelector('.minute');
        var sec = document.querySelector('.second');

        //2、添加注册事件
        //d = parseInt(总秒数/60/60 /24)；//计算天数
        //h = parseInt(总秒数/60/60 %24)；//计算小时
        //m = parseInt(总秒数/60%60)；//计算分钟
        //s = parseInt(总秒数%60)；//计算当前秒数
        var inputTime = new Date('2021-10-6 20:00:00'); //返回的是用户输入的时间总的毫秒数
        countDown(); //先调用一次，解决刚进入的时候显示123的问题

        //3、开启定时器
        setInterval(countDown,1000)

        function countDown(){
            var nowTime = new Date(); // 返回的是当前时间的总毫秒数
            var times = (inputTime - nowTime)/1000; //times是剩余时间的总毫秒数
            // var d = parseInt(times/60/60/24);//天
            // d = d < 10 ? '0' + d : d;
            var h = parseInt(times / 60 / 60 % 24); //小时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; //把剩余的小时给 小时的黑色的盒子
            var m = parseInt(times / 60 % 60);//分钟
            m = m < 10 ? '0' + m : m;
            min.innerHTML = m;
            var s = parseInt(times % 60); //秒
            s = s < 10 ? '0' + s : s;
            sec.innerHTML = s;

            // return d + '天'+ h + '小时' + m + '分钟' + s + '秒';

            // console.log(countDown('2021-10-06'));

        }
    </script>
</body>
</html>